<template>
	<el-container>
		<el-header>
			<el-button type="primary" @click="add_bt">添加</el-button>
		</el-header>
		<el-main>
			<el-table :data="list" style="width: 100%">
				<el-table-column label="排序" prop="sort">
				</el-table-column>

				<el-table-column label="名字" prop="name">
				</el-table-column>

				<el-table-column label="操作" >
					 <template slot-scope="scope">
						<el-button @click="handleUpdate(scope.row)" type="warning" size="small">更新</el-button>
						<el-button @click="handleDelete(scope.row.id)" type="danger" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-dialog
				title="添加消息"
				:visible.sync="dialogVisible"
				width="30%"
				:before-close="handleClose">
				<el-form :rules="rulesNotice" ref="ruleNotice" label-width="80px" :model="form">
				<el-form-item label="消息名" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="sort"  prop="sort">
					<el-input v-model="form.sort"></el-input>
				</el-form-item>
			</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="addCancel_bt">取 消</el-button>
					<el-button type="primary" @click="submit()">确 定</el-button>
				</span>
			</el-dialog>

		</el-main>
		<el-footer>
			<el-pagination background layout="prev, pager, next" :page-size="search_form.num" :total="total"
				@current-change="current_change">
			</el-pagination>
		</el-footer>
	</el-container>
</template>
<script>
	import Pic from '../../components/UploadPicOne.vue'
	export default {
		components: {
			Pic
		},
		data() {
			return {
				dialogVisible: false,
				list: [],
				total: 0,
				edit_type: 0, // 0添加， 1编辑
				url: ["/cms/table/insert", "/cms/table/update"],
				edit_tips: ["添加成功", "修改成功"],
        tableName: 'article_cate',
				form: {  //消息提示
					table: 'article_cate',
					name: '',
					content: '',
					sort: '',

				},
				rulesNotice: { //消息验证
					name: [
            { required: true, message: '请输入图片名', trigger: 'blur' },
          ],
					sort: [
            { required: true, message: '请输入数字', trigger: 'blur' },
          ],
				},

				// 分页请求数据
				search_form: {
					table: 'article_cate',
					page:1,//页码
    			num:5,//每页显示条数
    			where:null,
    			orderBy:"id",
    			asdes:"desc"
				}

			}
		},
		mounted() {
			// 获取数据
			this.get_data()
		},
		methods: {
			// 添加按钮
			add_bt() {
				this.dialogVisible = true
				this.edit_type = 0
			},
			
			handleClose() {
				this.dialogVisible = false
			},
			addCancel_bt() {
				this.$refs.ruleNotice.resetFields();
				this.dialogVisible = false

			},

			submit() {
				this.form["table"] = this.tableName
				this.$model.post(this.url[this.edit_type], this.form).then(res => {
					if (res.code == 200) {
						this.$message({
							message: this.edit_tips[this.edit_type],
							type: 'success'
						});
						this.dialogVisible = false
            this.clear()
						this.get_data()
					}
				})
			},

			get_data() {
        this.search_form.table = this.tableName
				const loading = this.$loading({
					lock: true,
					text: '加载中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				this.$model.post("/cms/table/get", this.search_form).then(res => {
					if (res.code == 200) {
						loading.close();
						this.list = res.data.data
						this.total = res.data.total
					}
				})
				console.log(this.list)
			},
			// 更新
			handleUpdate(row) {
				this.edit_type = 1
				this.form = row
				this.dialogVisible = true
				
			},

			handleDelete(id) {
				let url = "/cms/table/del?table=article_cate&id=" + id
				this.$model.put(url).then(res => {
					if (res.code == 200) {
						this.$message({
							message: '已删除',
							type: 'success'
						});
						this.search_form.page = 1
						this.get_data()
					}
				})
			},
      clear() {
				this.edit_type = 0
				this.handleClose()
				this.form = {
					table: this.tableName,
					name: '',
					content: '',
					sort: '',
				}
			},
			current_change(e) {
				this.search_form.page = e
				this.get_data()
			},
		},
	}
</script>
<style>
	.input {
		width: 300px;
	}
</style>
